<template>
    <div v-loading="$store.state.article.isLoading">
        <div class="el-header el-card container header">
            <h3 class="">{{article.title}}</h3>
            <div class="little-content">作者：{{article.user.nickname}} | 发布时间：{{article.gmtCreated}} | 阅读数： 0</div>
            <div class="little-container">
                <span class="tag" v-for="tag in article.tags">
                    <el-tag size="mini" >{{tag.name}}</el-tag>
                </span>
                <span class="tag">
                </span>
                <div style="float: right">
                    <form id="download" method="post">
                        <input type="hidden" name="id" :value="article.id">
                        <input type="hidden" name="host" :value="http">
                    </form>
                    <el-button type="primary" size="small" @click="download">下载</el-button>
                </div>
            </div>
        </div>
        <!--<el-divider></el-divider>-->
        <div class="el-container main-container">
            <div class="el-aside el-card container left-aside" v-if="this.catalogue.children.length != 0">
                <div>
                    <Catalogue v-for="h1,index1 in catalogue.children" :catalogue="h1" :key="index1" :scrollTop="scrollTop">
                        <Catalogue v-for="h2,index2 in h1.children" :catalogue="h2" :key="index2" :scrollTop="scrollTop">
                            <Catalogue v-for="h3,index3 in h2.children" :catalogue="h3" :key="index3" :scrollTop="scrollTop">
                                <Catalogue v-for="h4,index4 in h3.children" :catalogue="h4" :key="index4" :scrollTop="scrollTop">
                                    <Catalogue v-for="h5,index5 in h4.children" :catalogue="h5" :key="index5" :scrollTop="scrollTop">
                                        <Catalogue v-for="h6,index6 in h5.children" :catalogue="h6" :key="index6" :scrollTop="scrollTop">

                                        </Catalogue>
                                    </Catalogue>
                                </Catalogue>
                            </Catalogue>
                        </Catalogue>
                    </Catalogue>
                </div>
            </div>
            <div id="scroll-container" @scroll="handleScrollEvent" ref="content" class="el-main el-card container">
                <div class="markdown-body" v-html="article.contentHtml"></div>
            </div>
        </div>
    </div>
</template>
<script>
    import '@/assets/markdown/github.min.css';
    import '@/assets/markdown/github-markdown.min.css';
    import $ from 'jquery';
    import Catalogue from "../components/ArticleMain/Catalogue";
    import {http} from "../api/axios";

    export default {
        name: "ArticleMain",
        components: {Catalogue},
        data: function () {
            return {
                article: {
                    id: "",
                    title: "",
                    contentHtml: "",
                    content: "",
                    gmtCreated: "",
                    user: {
                        id: "",
                        nickname: "",
                    },
                    tags: [
                        {
                            id: "",
                            name: ""
                        }
                    ]
                },
                catalogue: {
                    num: 0,
                    data: {
                        title: '',
                        id: '',
                    },
                    children: [],
                    parent: null,
                    next: null,
                },
                scrollTop: 0, // 滚动条位置
                http: http
            }
        },
        methods: {
            /**
             * 获取目录数据
             */
            getCatalogue() {
                let html = this.article.contentHtml;
                let $html = $(html);
                // 存放最终数据
                let data = {
                    num: 0,
                    children: [],
                    parent: data,
                };
                let preData = data;
                let regex = /^H[123456]$/
                for (let i = 0; i < $html.length; i++) {
                    let elem = $html.get(i);
                    // 匹配标题标签 h1 ~ h6
                    if (regex.test(elem.tagName)) {
                        let num = elem.tagName.substring(1);
                        let $elem = $(elem);
                        // 每个标题的数据
                        let data = {
                            title: $elem.text(),
                            id: $elem.find("a").attr('id'),
                            class: `h${num}-li`
                        }
                        let newData = {
                            num: num,
                            data: data,
                            children: [],
                            parent: null,
                            next: null,
                        };

                        preData.next = newData;
                        // 获取新数据位置
                        while (num <= preData.num) {
                            preData = preData.parent;
                        }
                        newData.parent = preData;
                        preData.children.push(newData);
                        preData = newData;
                    }
                }
                this.catalogue = data;
            },

            /**
             * 处理内容区滚动事件
             */
            handleScrollEvent(e) {
                this.scrollTop = this.$refs.content.scrollTop;
            },
            /**
             * 下载文章
             */
            async download() {
                let url = await this.$store.dispatch("article/downloadUrl");
                let $download = $("#download");
                $download.attr('action', url);
                $download.submit();
            }
        },
        async mounted() {
            // 初始化数据
            this.article = await this.$store.dispatch("article/getArticle", {id: this.$route.params.id});
            this.getCatalogue();
        },
    }
</script>

<style scoped>
    .header {
        margin-bottom: 2px;
    }
    .main-container {
        height: 1080px;
    }
    .left-aside {
        max-width: 40rem;
        margin-right: 2px;
    }
    .container{
        padding: 3rem;
    }
    .little-content{
        font-size: 1.5rem;
        color: #909399;
        margin-right: 2rem;
        margin-top: 3rem;
    }
    .tag{
        margin-right: 0.5rem;
        line-height: 4rem;
    }
    .little-container{
        margin-top: 1.5rem;
    }
</style>